<template>
	<view class="container">
		<!-- 顶部区域 -->
		<view class="top-area">
			<text class="app-name">梦境</text>
		</view>
		<!-- 搜索栏 -->
		<view class="search-bar">
			<input v-model="inputValue" @blur="printInput" placeholder="输入你的梦境，探寻梦境奥秘" />
		</view>
		<!-- 功能模块区 -->
		<view class="function-modules">
			<view class="module-card left-marquee" @click="goToPage('traditional')" style="background-color: #e6f7ea;">
				<view class="module-text">
					<span class="marquee-content">当夜幕降临，梦境化作一面棱镜，将白天的情绪折射成荒诞又真实的画面，照见灵魂深处的褶皱。</span>
					<span class="marquee-content">当夜幕降临，梦境化作一面棱镜，将白天的情绪折射成荒诞又真实的画面，照见灵魂深处的褶皱。</span>
				</view>
			</view>
			<view class="module-card right-marquee" @click="goToPage('modern')" style="background-color: #e0f2fe;">
				<view class="module-text">
					<span class="marquee-content">梦里的碎片并非无意义的混沌，而是记忆、情感与未竟之事交织的拼图，拼凑出内心的隐秘地图。</span>
					<span class="marquee-content">梦里的碎片并非无意义的混沌，而是记忆、情感与未竟之事交织的拼图，拼凑出内心的隐秘地图。</span>
				</view>
			</view>
			<view class="module-card" @click="goToPage('culture')" style="background-color: #fff3e0;">
				<view class="module-text" style="width: 100%;">
					<span class="marquee-content">{{characters[Math.floor(Math.random() * characters.length)]}}</span>
				</view>
			</view>
			<view class="module-card" @click="goToPage('tips')" style="background-color: #f8e6ff;">
				<view class="module-text" style="width: 100%;">
					<span class="marquee-content">{{characters[Math.floor(Math.random() * characters.length)]}}</span>
				</view>
			</view>
		</view>
		<!-- 推荐内容区 -->
		<view class="recommend-content">
			<view class="point-out">
				提示：本信息内容明确界定为个人娱乐范畴，不涉及任何专业领域指导、商业推广或公共信息传播用途，请勿超出使用范围。
			</view>
			<view v-if="dataList.length === 0">
				&nbsp; &nbsp; 迷雾渐起，意识深处的密码正在被逐行破译 —— 这场梦境解析，即将揭开潜意识的神秘面纱.............
			</view>
			<view v-else>
				<view v-for="(item, index) in dataList" :key="index">
					<view class="item_html">
						{{item.name}}
					</view>
					<view class="content_html" v-html="item.content">

					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				characters: ['星荧', '琼霭', '绯渊', '幽昙', '絮羽', '梦漪', '灵纱', '月珀', '幻霓'],
				inputValue: "",
				dataList: []
			};
		},
		methods: {
			goToPage(page) {
				console.log(`跳转到 ${page} 页面`);
			},
			printInput() {
				const that = this;
				that.dataList = [];
				const APP_CODE = "d38751795a424f399618b17e7df32066";
				uni.request({
					url: 'https://jisudream.market.alicloudapi.com/dream/search',
					method: 'GET',
					header: {
						'Authorization': `APPCODE ${APP_CODE}`
					},
					data: {
						keyword: that.inputValue
					},
					success: (res) => {
						// 增加数据类型检查
						if (typeof res.data === 'object' && res.data !== null) {
							if (res.data.status === 0) {
								// 确保 res.data.result 是一个数组或对象
								if (Array.isArray(res.data.result) || typeof res.data.result === 'object') {
									that.dataList = res.data.result;
									console.log(that.dataList, "123");
								} else {
									console.warn('接口返回的 result 数据格式不正确');
								}
							} else if (res.data.status === '203') {
								that.dataList = [{
									name: '',
									content: '没有信息'
								}];
							} else {
								that.dataList = [];
							}
							console.log('接口调用成功', res.data);
						} else {
							console.warn('接口返回的数据格式不正确');
						}
					},
					fail: (err) => {
						console.error('接口调用失败', err);
						that.dataList = [{
							name: '',
							content: '与服务器断开'
						}];
					}
				});
			}
		}
	};
</script>

<style scoped lang="scss">
	$main-bg-color: #f9f9f9;
	$primary-color: #333;
	$border-color: #e5e5e5;
	$radius: 8rpx;

	.container {
		// 仅在小程序环境显示
		// #ifdef MP-WEIXIN
		min-height: 100vh;
		// #endif 

		// 仅在小程序环境隐藏 -->
		// #ifndef MP-WEIXIN 
		min-height: calc(100vh - 180rpx);
		// #endif 
		background-color: $main-bg-color;
		padding: 0 20rpx;
	}

	.top-area {
		padding: 80rpx 0 40rpx 0;
		text-align: center;
	}

	.app-name {
		font-size: 80rpx;
		background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}

	.search-bar {
		width: 90%;
		margin: 20rpx auto;
		background: white;
		border-radius: $radius;
		padding: 0 20rpx;

		input {
			height: 80rpx;
		}
	}

	.function-modules {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20rpx;
		margin: 30rpx auto;
		width: 90%;
	}

	.module-card {
		height: 140rpx;
		border-radius: $radius;
		overflow: hidden;
		position: relative;

		.module-text {
			position: absolute;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			white-space: nowrap;
		}

		.marquee-content {
			display: inline-block;
			// padding: 0 30rpx;
			font-size: 36rpx;
			background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
			-webkit-background-clip: text;
			background-clip: text;
			color: transparent;
		}
	}

	.left-marquee .module-text {
		animation: marquee 30s linear infinite;
	}

	.right-marquee .module-text {
		animation: marquee 30s linear infinite reverse;
	}

	@keyframes marquee {
		0% {
			transform: translateX(0);
		}

		100% {
			transform: translateX(-50%);
		}
	}

	.recommend-content {
		margin: 30rpx auto;
		width: 90%;

		.item_html {
			font-family: 'SimSun', sans-serif;
			font-size: 48rpx;
			background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
			-webkit-background-clip: text;
			background-clip: text;
			color: transparent;
			margin-bottom: 10rpx;
		}

		.content_html {
			font-size: 36rpx;
			color: $primary-color;
			line-height: 80rpx;
		}

		.point-out {
			font-size: 18rpx;
			color: #c4c4c4;
			padding: 10rpx 0;
		}
	}

	// 仅在小程序环境显示 
	// #ifdef MP-WEIXIN
	.my-view {
		text-indent: 2em;
		color: #beb1aa;
		/* 2em 表示首行缩进两个字符的宽度，em 是相对单位 */
	}

	// #endif 

	// 仅在小程序环境隐藏 -->
	// #ifndef MP-WEIXIN 
	.my-view {
		color: #beb1aa;
		/* 2em 表示首行缩进两个字符的宽度，em 是相对单位 */
	}

	// #endif 
</style>